<template>
  <el-dialog
    title="自定义显示列项"
    width="580px"
    :visible.sync="visible"
    append-to-body
    class="sort-column-dialog"
  >
    <!-- <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="部门名称：" prop="deptName">
        <el-input ref="input" v-model="form.deptName"></el-input>
      </el-form-item>
    </el-form> -->
    <p class="sort-msg">• 列项显示不得少于5项，最多支持自定义10个列项</p>
    <div class="sort-column-box">
      <div class="sort-column-title sort-column-item">
        <div class="item item-1">显示</div>
        <div class="item item-2">列名</div>
        <div class="item item-3">拖动调整顺序</div>
      </div>
      <div class="sort-column-list">
        <draggable
          v-model="list"
          animation="500"
          force-fallback="true"
          @start="onStart"
          @end="onEnd"
        >
          <div v-for="item in list" :key="item.address" class="sort-column-item">
            <div class="item item-1">1</div>
            <div class="item item-2">1</div>
            <div class="item item-3">1</div>
          </div>
        </draggable>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex';
  import draggable from 'vuedraggable';
  export default {
    //注册draggable组件
    components: {
      draggable,
    },
    data() {
      const validateDeptName = (rule, value, callback) => {
        const _value = `${value}`.trim();
        if (_value === '') {
          callback(new Error('部门名称不能为空'));
          return;
        }
        if (_value.length > 50) {
          callback(new Error('部门名称长度不能超过50个字'));
          return;
        }
        callback();
      };
      return {
        visible: false,
        form: {
          deptName: '',
        },
        rules: {
          deptName: [{ required: true, validator: validateDeptName, trigger: 'change' }],
        },
        list: [1, 2, 3, 4, 5, 6, 7],
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
    },
    methods: {
      onOpen() {
        this.visible = true;
      },
      close() {
        this.visible = false;
      },
      checkMove(evt) {
        console.log(evt);
        return true;
      },
      //开始拖拽事件
      onStart() {
        this.drag = true;
      },
      //拖拽结束事件
      onEnd() {
        this.drag = false;
      },
      save() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            await this.$store.dispatch('organization/renameTreeNode', {
              ...this.form,
              organizationId: this.organizationId,
            });
            this.close();
          } else {
            return false;
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .sort-msg {
    color: #7f848b;
  }
  .sort-column {
    &-box {
      height: 450px;
      display: flex;
      border: 1px solid #eeeeee;
      overflow: hidden;
      flex-direction: column;
    }
    &-list {
      flex: 1;
      overflow: auto;
    }
    &-item {
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      display: flex;
      .item {
        text-align: center;
      }
      > .item-1 {
        width: 60px;
      }
      > .item-2 {
        flex: 1;
      }
      > .item-3 {
        width: 150px;
      }
    }
    &-title {
      color: #7f848b;
    }
  }
</style>
